%dotAcitve {
  padding: 0;
  .normal-icon {
    transform: scale(1.2);
    transform-origin: -2px 0;
    border: 4px #fff solid;
    background: #800000;
  }
}

.c-path {
  $step: 34px;
  position: fixed;
  top: 300px;
  right: 60px;
  z-index: 100;
  &::after {
    display: block;
    content: '\20';
    border: 1px rgba(195, 192, 191, .7) solid;
    height: $step * 4;
    width: 0;
    font-size: 0;
    position: absolute;
    top: 6px;
    left: 2.2px;
  }
  .c-path--dot {
    position: absolute;
    left: -6px;
    &.active {
      .normal {
        @extend %dotAcitve;
        .text {
          opacity: 1;
          transition: opacity .3s;
        }
      }
    }
    .normal {
      &:hover {
        @extend %dotAcitve;
        .text {
          opacity: 1;
          transition: opacity .3s;
        }
      }
    }
  }
  .c-path--dot:nth-child(1) {
    top: 0;
  }
  .c-path--dot:nth-child(2) {
    top: $step;
  }
  .c-path--dot:nth-child(3) {
    top: $step * 2;
  }
  .c-path--dot:nth-child(4) {
    top: $step * 3;
  }
  .c-path--dot:nth-child(5) {
    top: $step * 4;
  }
  .text {
    font-size: 14px;
    color: #231815;
    font-family: DIN;
    position: absolute;
    top: 0;
    left: -128px;
    display: block;
    width: 120px;
    text-align: right;

    opacity: 0;
    transition: opacity .3s;
  }
  .normal {
    display: block;
    cursor: pointer;
    padding: 6px;
  }
  .normal-icon {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6d6e71;
    position: relative;
    z-index: 1;
  }
}


// discover hack
.x-discover {
  .c-path {
    .text {
      color: #fff;
    }
    .normal-icon {
      background: #fff;
    }
  }
}
